<template>
	<view class="container">
		<tui-tabs :tabs="tabs" :isFixed="scrollTop >= 0" :currentTab="currentTab" selectedColor="#007aff"
			sliderBgColor="#007aff" @change="change" itemWidth="50%"></tui-tabs>
		<!--选项卡逻辑自己实现即可，此处未做处理-->
		<view :class="{ 'tui-item-list': scrollTop >= 0 }">
			<view class="tui-item-item" v-for="(order, Index) in orderList" :key="Index">
				<tui-list-cell :hover="false">
					<view class="tui-list-inline-item">
						<view class="tui-list-title">{{ order.facilityName }}</view>
						<tui-tag :type="orderStatusColorFormat(order.orderStatus)" plain padding="8rpx 13rpx">
							{{orderStatusFormat(order.orderStatus)}}
						</tui-tag>
					</view>
					<view class="tui-list-inline-item">
						<view style="color:#909399">
							<tui-icon size="14" name="gps" color="#06AD56" style="margin-right:8rpx;"></tui-icon>
							<text>{{ order.address }}</text>
						</view>
					</view>
					<tui-divider width="80%" :height="50">司机处理情况</tui-divider>
					<view class="deal-wrap">
						<view class="deal-inline-item">
							<text style="color:#909399">车辆：</text>
							<text>{{ order.carNum }}</text>
						</view>
						<view class="deal-inline-item">
							<text style="color:#909399">司机：</text>
							<text>{{ order.driverName }}</text>
						</view>
						<view class="deal-inline-item">
							<text style="color:#909399">联系方式：</text>
							<text @tap="makePhoneCall(order.driverMobile)">{{ order.driverMobile }}</text>
						</view>
						<view class="deal-inline-item">
							<text style="color:#909399">处理状态：</text>
							<text
								:style="{color:order.driverDealStatus==2?'green':'red'}">{{ !order.driverDealStatus?'':order.driverDealStatus==2?'已清运':'未清运' }}</text>
						</view>
						<view class="deal-inline-item">
							<text style="color:#909399">处理时间：</text>
							<text>{{ order.driverDealTime?order.driverDealTime:'' }}</text>
						</view>
					</view>
					<tui-divider width="80%" :height="50">保洁员处理情况</tui-divider>
					<view class="deal-wrap">

						<view class="deal-inline-item">
							<text style="color:#909399">保洁员：</text>
							<text>{{ order.cleanerName }}</text>
						</view>
						<view class="deal-inline-item">
							<text style="color:#909399">处理状态：</text>
							<text
								:style="{color:order.cleanerDealStatus==2?'green':'red'}">{{ !order.cleanerDealStatus?'':order.cleanerDealStatus==2?'已清运':'未清运' }}</text>
						</view>
						<view class="deal-inline-item">
							<text style="color:#909399">处理时间：</text>
							<text>{{ order.cleanerDealTime?order.cleanerDealTime:'' }}</text>
						</view>
						<view class="deal-inline-item" v-if="order.cleanerDealPic">
							<text style="color:#909399;vertical-align: top;">现场照片：</text>
							<tui-image-group :imageList="order.cleanerDealPic.split(',').map(v=>{return {src:v}})"
								radius="0"></tui-image-group>
						</view>
					</view>

					<view class="tui-list-inline-item">
						<view>
							<tui-icon size="15" name="manager" color="#007aff" style="margin-right:15rpx"></tui-icon>
							<text>{{order.managerName}}</text>
							<text @tap="makePhoneCall(order.managerMobile)">{{ order.managerMobile }}</text>
						</view>

						<view style="display:flex">
							<tui-button type="green" width="150rpx" size="28" height="60rpx" style="margin-right:15rpx;"
								@tap="openNavi(order)">
								<tui-icon size="15" name="navigation" color="#ffffff"></tui-icon>去这里
							</tui-button>
							<tui-button type="primary" width="150rpx" size="28" height="60rpx"
								v-if="order.orderStatus==2" @tap="handleOrder(order.orderId)">
								<tui-icon size="15" name="clean" color="#ffffff"></tui-icon>处理
							</tui-button>
						</view>
					</view>
				</tui-list-cell>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="noMore" backgroundColor="#fafafa"></tui-nomore>
		<!--加载loadding-->
		<!--弹出取消告警-->
		<tui-modal :show="modalShow" @cancel="hideModal" :custom="true">
			<form @submit="formSubmit" @reset="formReset">
				<tui-list-cell :hover="false">
					<radio-group class="radio-group" @change="radioChange($event)" name="cleanerDealStatus">
						<label class="tui-radio">
							<radio value="2" color="#5677fc" style="transform: scale(0.7)" />
							已清运
						</label>
						<label class="tui-radio">
							<radio value="1" color="#5677fc" style="transform: scale(0.7)" />
							未清运
						</label>

					</radio-group>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<tui-textarea v-model="form.cleanerDealContent" flexStart height="80rpx" labelSize="28"
							min-height="80rpx" label="备注" placeholder="请输入备注">
						</tui-textarea>
					</view>
				</tui-list-cell>
				<tui-upload :value="form.cleanerDealPicList" :serverUrl="serverUrl" @complete="completePic"
					@remove="removePic" :limit="3" :header="{'Authorization':Authorization }" width="200" height="200">
				</tui-upload>
				<tui-button height="72rpx" :size="28" shape="circle" formType="submit" type="primary"
					style="margin-top:20rpx">提交</tui-button>
			</form>

		</tui-modal>
	</view>
</template>

<script>
	const form = require("@/components/common/tui-validation/tui-validation.js")
	import
	tui
	from "../../common/httpRequest.js";

	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				serverUrl: tui.interfaceUrl() + "/app/common/upload",
				Authorization: 'Bearer ' + uni.getStorageSync('token'),
				orderStatusDict: [{
					dictValue: 1,
					dictLabel: '待清运',
					color: 'warning'
				}, {
					dictValue: 2,
					dictLabel: '待检查',
					color: 'primary'
				}, {
					dictValue: 3,
					dictLabel: '已完成',
					color: 'green'
				}, {
					dictValue: 4,
					dictLabel: '已完成，未清运',
					color: 'danger'
				}],
				tabs: [{
						name: "待检查",
					},
					{
						name: "清运成功",
					},
					{
						name: "清运异常",
					},
				],
				currentTab: 0,
				pageIndex: 1,
				loadding: false,
				scrollTop: 0,
				orderList: [],
				total: 5,
				pageNum: 1,
				modalShow: false,
				form: {
					orderId: null,
					cleanerDealStatus: '',
					cleanerDealContent: '',
					cleanerDealPicList: []
				}
			};
		},
		computed: {
			...mapState(["isLogin", "userinfo"]),

			noMore() {
				return this.orderList.length >= this.total;
			},
			disabled() {
				return this.loadding || this.noMore;
			},
			orderStatus() {
				return this.currentTab + 2;
			},
		},
		onShow() {
			this.orderList = [];
			this.pageNum = 1;
			this.getList();
		},
		methods: {
			orderStatusFormat(orderStatus) {
				return this.orderStatusDict.find(v => v.dictValue == orderStatus).dictLabel
			},
			orderStatusColorFormat(orderStatus) {
				return this.orderStatusDict.find(v => v.dictValue == orderStatus).color
			},
			getList() {
				this.loadding = true;
				this.tui.request(
						"/app/work/list",
						"GET", {
							pageSize: 5,
							pageNum: this.pageNum,
							orderStatus: this.orderStatus,
							cleanerId: this.userinfo.personId
						},
						false,
						false,
						false
					)
					.then((res) => {
						res.rows.map((v) => {
							this.orderList.push(v);
						});

						this.total = res.total;
						this.loadding = false;
						this.pageNum = this.pageNum + 1;
					});
			},
			change(e) {
				this.currentTab = e.index;
				this.total = 20;
				this.orderList = [];
				this.pageNum = 1;
				this.getList();
			},
			handleOrder(orderId) {
				this.form.orderId = orderId
				this.form.cleanerDealStatus = ''
				this.form.cleanerDealContent = ''
				this.form.cleanerDealPicList = []
				this.modalShow = true
			},
			hideModal() {
				this.modalShow = false
			},
			formSubmit: function(e) {

				//表单规则
				let rules = [{
					name: "cleanerDealStatus",
					rule: ["required"], //可使用区间，此处主要测试功能
					msg: ["请选择处理结果"]
				}];
				//进行表单检查
				let formData = e.detail.value;
				let checkRes = form.validation(formData, rules);
				if (!checkRes) {
					this.doHandle(formData)
				} else {
					uni.showToast({
						title: checkRes,
						icon: "none"
					});
				}
			},
			doHandle() {
				let params = JSON.parse(JSON.stringify(this.form))
				params.cleanerDealPic = params.cleanerDealPicList.join(',')
				this.tui.request("/app/work/cleaner/deal", "PUT", params, false, false, true).then(res => {
					if (res.code == 200) {
						this.modalShow = false
						this.total = 20;
						this.orderList = [];
						this.pageNum = 1;
						this.getList();
					}


				})
			},
			completePic(e) {
				debugger
				this.form.cleanerDealPicList = e.imgArr;
				console.log(this.form.cleanerDealPicList)
			},
			removePic: function(e) {
				//移除图片
				console.log(e)
				let index = e.index
			},
			radioChange(e) {
				this.form.cleanerDealStatus = e.detail.value
			},
			openNavi(order) {
				uni.openLocation({
					latitude: Number(order.lat),
					longitude: Number(order.lng),
					name: order.facilityName,
					address: order.address
				});
			},
			makePhoneCall(phoneNum) {
				uni.makePhoneCall({
					phoneNumber: phoneNum
				});
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 200);
		},
		onReachBottom() {
			//只是测试效果，逻辑以实际数据为准
			if (!this.disabled) {
				this.getList();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
	};
</script>

<style>
	.container {
		/* padding-bottom: env(safe-area-inset-bottom); */
		padding-bottom: 100rpx;
	}

	.tui-item-list {
		margin-top: 80rpx;
	}

	.tui-item-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-list-title {

		font-size: 32rpx;
		color: #000000;

	}

	.tui-list-inline-item {
		width: 100%;
		font-size: 28rpx;
		line-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-text-gray {
		color: #888;
		font-size: 26rpx;

	}

	.tui-modal-custom {
		text-align: center;
		display: flex;
	}

	.tui-prompt-title {
		padding-bottom: 20rpx;
		font-size: 24rpx;
	}

	.tui-modal-input {
		border-bottom: 1rpx solid #e6e6e6;
		font-size: 22rpx;
	}

	.deal-wrap {
		/* border:2rpx solid #909399; */
		border-radius: 8rpx;
		padding: 5rpx;
		font-size: 28rpx;
		padding-left: 10%;
	}

	.deal-inline-item {
		line-height: 40rpx;
	}
</style>
